/* eslint-disable jsx-a11y/alt-text */
import { Button, message, Card, Row, Col, Tabs, Form, Input, Radio, Upload, Alert } from 'antd';
import React, { useState, useEffect } from 'react';
import { history } from 'umi';

import { PageContainer } from '@ant-design/pro-layout';
// import moment from 'moment';
import Local from '@/utils/local';
import { upadataPassword } from './api';
import { outLogin } from '@/services/ant-design-pro/api';
import styles from './index.less';

/**
 * 退出登录，并且将当前的 url 保存
 */
const loginOut = async () => {
  await outLogin();
  Local.clear();
  history.replace({
    pathname: '/user/login',
  });
};

const { TabPane } = Tabs;
const TableList = () => {
  const [loading, setLoading] = useState(false);
  const [detailData, setDetail] = useState({});
  const [form2] = Form.useForm();
  const [avatar, setAvatar] = useState();
  const [newAvatar, setNewAvatar] = useState();

  const { query } = history.location;
  const msg = query?.msg;

  const upadataPasswordData = () => {
    form2.validateFields().then(values => {
      setLoading(true);
      const hide = message.loading('正在提交');
      upadataPassword({ ...values }).then(res => {
        hide();
        setLoading(false);
        if (res.code === 0) {
          message.success('修改成功');
          setTimeout(() => {
            loginOut();
          }, 1500);
        } else {
          message.error(res.msg || '修改失败，请重试');
        }
      });
    });
  };
  // 栅格化
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 10 },
  };

  useEffect(() => {}, []);

  return (
    <div style={{ width: 600, margin: '0 auto', paddingTop: 100 }}>
      <div className={styles.container}>
        <Alert message={msg} type="warning" style={{ marginBottom: 30, width: 400 }} />
        <Form {...formItemLayout} name="control-ref" form={form2}>
          <Form.Item label="原密码" name="oldPassword" rules={[{ required: true }]}>
            <Input maxLength={20} type="password" placeholder="输入旧密码" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="新密码" name="newPassword" rules={[{ required: true }]}>
            <Input maxLength={20} type="password" placeholder="输入新密码" style={{ width: 300 }} />
          </Form.Item>
          <Form.Item label="确认密码" name="repeatPassword" rules={[{ required: true }]}>
            <Input
              maxLength={20}
              type="password"
              placeholder="输入确认新密码"
              style={{ width: 300 }}
            />
          </Form.Item>
        </Form>
        <Row>
          <Col span={14} push={4}>
            <Button type="primary" onClick={upadataPasswordData} loading={loading}>
              提交
            </Button>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default TableList;
